<template>
    <flow-up
        @close="$emit('close')"
        title="反馈信息"
        :show="show"
        :rightText="canSave ? '保存' : ''"
        @clickRight="$emit('save')"
    >
        <van-cell-group title="反馈">
            <van-cell>
                <div name="title" class="title">
                    {{ feedback.title }}
                </div>
            </van-cell>
            <van-cell title="发生位置">
                <div>{{ feedback.position }}</div>
            </van-cell>
        </van-cell-group>
        <van-cell-group title="详细描述">
            <van-cell>
                <div class="description">{{ feedback.desc }}</div>
            </van-cell>
        </van-cell-group>
        <van-cell-group title="图片">
            <van-cell>
                <div class="float-left" v-if="feedback.picture.length">
                    <van-image
                        v-for="(url, index) in feedback.picture"
                        :key="url"
                        width="200rpx"
                        height="200rpx"
                        :src="url"
                        @click="Preview(index)"
                    />
                </div>
                <div class="voidImage row float-left" v-else>没有图片</div>
            </van-cell>
        </van-cell-group>

        <van-cell-group title="是否完成">
            <van-cell
                :title="feedback.isDone ? '反馈已经处理' : '反馈未处理'"
                @click="$emit('taskDone')"
            >
                <van-checkbox :value="feedback.isDone" />
            </van-cell>
        </van-cell-group>

        <div v-if="editable">
            <!-- TODO 添加反馈者和开发者的沟通 -->
        </div>
    </flow-up>
</template>

<script>
import vanCheckbox from "@/wxcomponents/weapp/dist/checkbox/index";
export default {
    props: ["feedback", "editable", "show", "canSave"],
    components: { vanCheckbox },
    watch: {
        feedback(val) {
            console.log(val);
        },
    },
    methods: {
        Preview(index) {
            wx.previewImage({ urls: this.feedback.picture, current: index });
        },
    },
};
</script>

<style lang="less" scoped>
.description {
    float: left;
    text-indent: 58rpx;
}
.title {
    text-align: enter;
    font-size: 18px;
    line-height: 20px;
    color: black;
}
.float-left {
    float: left;
}
.voidImage {
    height: 200rpx;
    width: 200rpx;
    background: #eee;
}
</style>